<style lang="less">
  .login-wrap {
    padding: 0;
  }

  .w100 {
    width: 100%;
  }

  .w80 {
    width: 80%;
  }

  .login-wrap {
    padding: 0 0.3rem;
  }
</style>

<template>
  <div class="contain">
    <div class="loader-base" v-if="showLoad">
      <div class="loader-wrap"></div>
    </div>
    <div class="detail-head-tip mb20" v-if="StudentInfo != null">
      {{StudentInfo.Name}}，就读于{{StudentInfo.Age | StdGrade}}
    </div>
    <ul class="login-wrap">
      <li class="displayflex">
        <span class="iconfont icon-pcclass"></span>
        <div class="displayflex w100">
          <popup-picker class="picker-wrap" title="课程" :data="classnamelist" placeholder="点击选择" value-text-align="right"
                        :show-name="showName" v-model="classguid"></popup-picker>
          <i class="iconfont icon-cc-right"></i>
        </div>
      </li>

      <li class="displayflex">
        <span class="iconfont icon-pcarea"></span>
        <div class="displayflex w100">
          <popup-picker :disabled="ClassGuid == null" class="picker-wrap" title="区域" :data="classarealist"
                        placeholder="点击选择" value-text-align="right" :show-name="showName"
                        v-model="classarea"></popup-picker>
          <i class="iconfont icon-cc-right"></i>
        </div>
      </li>

      <li class="displayflex" v-if="ClassArea != null">
        <span class="iconfont icon-school"></span>
        <div class="displayflex w100">
          <popup-picker :disabled="ClassArea == null" class="picker-wrap" title="校区" :data="classschoollist"
                        placeholder="点击选择" value-text-align="right" :show-name="showName"
                        v-model="classschool"></popup-picker>
          <i class="iconfont icon-cc-right"></i>
        </div>
      </li>

      <li class="displayflex" v-if="SchoolGuid != null">
        <span class="iconfont icon-pctime"></span>
        <div class="displayflex w100">
          <popup-picker :disabled="SchoolGuid == null" class="picker-wrap" title="日期" :data="classdatelist"
                        placeholder="点击选择" value-text-align="right" :show-name="showName"
                        v-model="classdate"></popup-picker>
          <i class="iconfont icon-cc-right"></i>
        </div>
      </li>

      <li class="displayflex" v-if="ClassDate != null">
        <span class="iconfont icon-pctime"></span>
        <div class="displayflex w100">
          <popup-picker :disabled="ClassDate == null" class="picker-wrap" title="时间" :data="classtimelist"
                        placeholder="点击选择" value-text-align="right" :show-name="showName"
                        v-model="classtime"></popup-picker>
          <i class="iconfont icon-cc-right"></i>
        </div>
      </li>

      <li class="displayflex" v-if="ClassTime != null">
        <span class="iconfont icon-pcclassroom"></span>
        <div class="displayflex w100">
          <popup-picker :disabled="ClassTime == null" class="picker-wrap" title="课室" :data="classroomlist"
                        placeholder="点击选择" value-text-align="right" :show-name="showName"
                        v-model="classroom"></popup-picker>
          <i class="iconfont icon-cc-right"></i>
        </div>
      </li>
      <div v-if="showBtn" style="padding:0 0 0.3rem 0; text-align:center;">
        <section v-if="orderSign == 'tzw'">保存信息即可获赠价值￥1380元的暑期七天语文写作提高课程</section>
        <section v-else>仅需支付<b style="color:#ff7202;">1分钱</b><br>即可获得价值￥1380元的暑期七天语文写作提高课程</section>
      </div>
      <div v-if="showBtn" class="agbtn btn-info" style="display:block; height:45px; line-height:45px;"
           @click="goPay">
        <section v-if="orderSign == 'tzw'">确认并保存</section>
        <section v-else>确认并支付</section>
      </div>
      <!--<div v-if="hasBought" class="agbtn btn-dark disabled" style="display:block; height:45px; line-height:45px;">
        <section v-if="orderSign == 'tzw'">您已经报名参加了此课程，感谢您的支持</section>
        <section v-else>您已经购买过此课程，感谢您的支持</section>
      </div>-->
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showLoad: false,
        showName: true,
        hasBought: false,

        classguid: [],
        classnamelist: [],

        classdate: [],
        classdatelist: [],

        classtime: [],
        classtimelist: [],

        classarea: [],
        classarealist:
          [
            [
              {
                value: "武昌",
                name: "武昌",
              },
              {
                value: "汉口",
                name: "汉口",
              },
              {
                value: "汉阳",
                name: "汉阳",
              },
            ]
          ],

        classschool: [],
        classschoollist: [],

        classroom: [],
        classroomlist: [],

        ///业务数据
        ClassGuid: null,
        ClassArea: null,
        SchoolGuid: null,
        ClassDate: null,
        ClassTime: null,
        ClassRoomGuid: null,
        ClassPrice: 0,

        //显示按钮
        showBtn: false,
      }
    },
    watch: {
      classguid(n) {
        this.ClassGuid = n[0];
      },
      classarea(n) {
        var self = this;
        if (this.ClassArea != n[0]) {
          self.ClassArea = n[0];

          self.SchoolGuid = null;
          self.ClassDate = null;
          self.ClassTime = null;
          self.ClassRoomGuid = null;
          self.classschool = [];
          self.classdate = [];
          self.classTime = [];
          self.classroom = [];
          self.getSchool();
        }
      },
      classschool(n) {
        var self = this;
        if (this.SchoolGuid != n[0]) {
          self.SchoolGuid = n[0];
          self.ClassDate = null;
          self.ClassTime = null;
          self.ClassRoomGuid = null;
          self.classdate = [];
          self.classTime = [];
          self.classroom = [];

          self.getClassDate();
        }
      },
      classdate(n) {
        var self = this;
        if (this.ClassDate != n[0]) {
          self.ClassDate = n[0];
          console.log(self.ClassDate);
          self.classtime = [];
          self.classTime = null;
          self.ClassRoomGuid = null;
          self.classroom = [];

          self.getClassTime();
        }
      },
      classtime(n) {
        var self = this;
        if (this.ClassTime != n[0]) {
          self.ClassTime = n[0];

          // self.ClassArea = null;
          self.classroom = [];
          self.getClassRoom();
        }
      },
      classroom(n) {
        this.ClassRoomGuid = n[0];
      },
      ClassRoomGuid(n) {
        if (n != '' && n != null) {
          this.showBtn = true;
        } else {
          this.showBtn = false;
        }
      },
    },
    computed: {
      StudentInfo() {
        if (sessionStorage.YLBB_PersionalInfo != null && sessionStorage.YLBB_PersionalInfo != '') {
          return JSON.parse(sessionStorage.YLBB_PersionalInfo)
        } else {
          return null;
        }
      },
      orderSign() {
        if (localStorage.orderSign) {
          // alert(111)
          return localStorage.orderSign
        } else {
          // alert(222)
          return null;
        }
      }
    },
    methods: {
      getData() {
        console.log('=============>' + this.orderSign)
        var self = this;
        ///验证学生信息是否存在
        if (this.StudentInfo == null || this.StudentInfo == '') {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "学生信息已经失效，请返回重新填写！",
            onHide() {
              self.$router.push({
                path: 'FillInfo',
              })
            }
          });
        } else {
          this.getClassName();
        }
      },

      getClassName() {
        var self = this;
        var query = {
          InputAge: this.StudentInfo.Age,
        };
        this.showLoad = true;
        this.Ajax.post("GetStdClassName", query).then(function (resp) {
          self.showLoad = false;
          var classnamelist = [];
          for (var i = 0; i < resp.Datas.length; i++) {
            self.classguid.push(resp.Datas[i].guid);
            self.ClassGuid = resp.Datas[i].guid;
            self.ClassPrice = resp.Datas[i].charge;
            var item = {
              value: resp.Datas[i].guid,
              name: resp.Datas[i].className,
            }
            classnamelist.push(item);
          }
          self.classnamelist.splice(0, 1, classnamelist)
        });
      },

      getSchool() {
        var self = this;
        var query = {
          District: this.ClassArea,
          // TimeCate: this.ClassDate,
        }
        this.showLoad = true;
        this.Ajax.post("GetStdSchoolName", query).then(function (resp) {
          self.showLoad = false;
          var classschoollist = [];
          if (resp.Datas.length > 0) {
            for (var i = 0; i < resp.Datas.length; i++) {
              var item = {
                value: resp.Datas[i].guid,
                name: resp.Datas[i].schoolName,
              }
              classschoollist.push(item);
            }
          } else {
            var item = {
              value: '',
              name: '当前区域无校区可用',
            }
            classschoollist.push(item);
          }
          self.classschoollist.splice(0, 1, classschoollist);
        });
      },
      getClassDate() {
        let self = this;
        let query = {
          SchoolGuid: this.SchoolGuid,
          ClassGuid: this.ClassGuid
        };
        this.showLoad = true;
        this.Ajax.post("getClassDate", query).then(function (resp) {
          self.showLoad = false;
          var classdatelist = [];
          if (resp.Datas.length > 0) {
            for (var i = 0; i < resp.Datas.length; i++) {
              var data = resp.Datas[i];
              var name = '';
              switch (data.timeCate) {
                case "715":
                  name = "7月15日至21日";
                  break;
                case "819":
                  name = "8月19日至25日";
                  break;
                case "824":
                  name = "8月24日至30日";
                  break;
                case "825":
                  name = "8月25日至31日";
                  break;
                case "826":
                  name = "8月26日至9月1日";
                  break;
                case "827":
                  name = "8月27日至9月2日";
                  break;
              }
              var item = {
                value: data.timeCate,
                name: name,
              };
              classdatelist.push(item);
            }
          } else {
            var item = {
              value: '',
              name: '当前校区无日期可用',
            };
            classdatelist.push(item);
          }
          self.classdatelist.splice(0, 1, classdatelist);
        })
      },

      getClassTime() {
        let self = this;
        let query = {
          TimeCate: this.ClassDate,
          SchoolGuid: this.SchoolGuid,
          ClassGuid: this.ClassGuid
        };
        this.showLoad = true;
        this.Ajax.post("GetClassTime", query).then(function (resp) {
          self.showLoad = false;
          var classtimelist = [];
          if (resp.Datas.length > 0) {
            for (var i = 0; i < resp.Datas.length; i++) {
              var item = {
                value: resp.Datas[i].time,
                name: resp.Datas[i].time,
              };
              classtimelist.push(item);
            }
          } else {
            var item = {
              value: '',
              name: '当前日期无时间可用',
            }
            classtimelist.push(item);
          }
          self.classtimelist.splice(0, 1, classtimelist);
        })
      },

      getClassRoom() {
        var self = this;
        var query = {
          SchoolId: this.SchoolGuid,
          ClassID: this.ClassGuid,
          Time: this.ClassTime,
          TimeCate: this.ClassDate,
        }
        this.showLoad = true;
        this.Ajax.post("GetStdClassRoom", query).then(function (resp) {
          self.showLoad = false;
          var classroomlist = [];
          if (resp.Datas.length > 0) {
            for (var i = 0; i < resp.Datas.length; i++) {
              var item = {
                value: resp.Datas[i].guid,
                name: resp.Datas[i].classRoomName + "（还有" + resp.Datas[i].availableVolume + "个名额）",
              }
              classroomlist.push(item);
            }
          }
          else {
            var item = {
              value: '',
              name: '当前校区无教室可用',
            }
            classroomlist.push(item);
          }
          self.classroomlist.splice(0, 1, classroomlist);
        });
      },

      goPay() {
        //加入标识区分
        if (this.orderSign == 'tzw') {
          let self = this,
            query = {
              Name: this.StudentInfo.Name,
              ContactTel: this.StudentInfo.Mobile,
              InSchool: this.StudentInfo.School,
              InGrade: this.StudentInfo.Age,
              WxOpenID: localStorage.WeChatOpenId,
              ClassRoomGuid: this.ClassRoomGuid,
              orderSign: this.orderSign,
            };
          this.showLoad = true;
          this.Ajax.post("SaveOrder", query).then(function (resp) {
            if (resp.IsSuccess) {
              self.$vux.toast.show({
                type: "success", //success, warn, cancel, text
                text: "报名成功",
                onHide() {
                  self.$router.push({
                    path: 'FillInfo',
                    query: {
                      state: 'tzw'
                    }
                  })
                }
              });
            } else {
              self.$vux.toast.show({
                type: "warn", //success, warn, cancel, text
                text: resp.ErrorMessage,
              });
            }
          });
        }
        else {
          var query = {
            A: this.ClassGuid,
            B: this.ClassTime,
            C: this.ClassArea,
            D: this.SchoolGuid,
            E: this.ClassRoomGuid,
            F: this.ClassPrice,
            G: this.StudentInfo,
          }
          var billInfo = JSON.stringify(query);
          sessionStorage.BillInfo = billInfo;
          this.$router.push({
            path: 'Pay',
          })
        }
      },
      preCheck() {
        var self = this;
        var query = {
          Name: this.StudentInfo.Name,
          ContactTel: this.StudentInfo.Mobile,
        };
        this.showLoad = true;
        this.Ajax.post("GetOrderByQuery", query).then(function (resp) {
          self.showLoad = false;
          if (resp.IsSuccess && resp.Data != null) {
            self.hasBought = true;
          }
        })
      },
    },
    created() {
      this.getData();
      this.preCheck();
    }
  }
</script>
